<template>
    <div class="wrapper-new" @click="treeBlurHide">
        <el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="客户类别: ">
                        <el-input v-model="category.name" icon="caret-bottom" placeholder="选择客户类别"  size="small"></el-input>
                        <div @click.stop="category.showTree=!category.showTree"
                             style="position: absolute;top:3px;left:0;z-index: 10;width: 100%;height: 30px;">
                            <div v-show="category.showTree" class="department-tree-select inline-tree" >
                                <el-tree :data="category.data"
                                         style="width: 240px"
                                         show-checkbox
                                         default-expand-all
                                         node-key="id"
                                         ref="searchTree"
                                         @check-change="handleCheckChange"
                                         :props="defaultProps">
                                </el-tree>
                            </div>
                        </div>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="客户名称:">
                        <el-input placeholder="客户名称" v-model="filter.CustomerName" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="销售员:">
                        <el-input :disabled="true" v-show="readOnly" placeholder="销售员" v-model="seller" size="small"></el-input>
                        <el-input v-show="!readOnly" readonly placeholder="销售员" v-model="seller" size="small" @focus="getOwnerData" icon="el-icon-search"></el-input>
                    </el-form-item>
                </el-col>

                 <el-col :span="4">
                    <el-form-item label="手机号码:">
                        <el-input placeholder="手机号码" v-model="filter.Tel" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="客户来源:">
                        <el-input placeholder="客户来源" v-model="filter.CustomerFrom" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="联系人:">
                        <el-input placeholder="联系人" v-model="filter.ContactName" size="small"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="4">
                    <el-form-item label="跟进数:">
                        <el-input placeholder="次以上" v-model="filter.FollowCount" size="small"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="是否重要客户:">
                        <el-select v-model="filter.importantFlag" size="small">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="KP:">
                        <el-select v-model="filter.KpFlag" size="small">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="创建时间:">
                        <el-date-picker
                                size="small"
                                v-model="GmtCreate"
                                type="datetimerange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions1">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="最新跟进时间:">
                        <el-date-picker
                                size="small"
                                v-model="LastFollowTime"
                                type="datetimerange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="4">
                    <el-form-item label="下次联系时间:">
                        <el-date-picker
                                size="small"
                                v-model="PlanTime"
                                type="datetimerange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                        </el-button>
                        <el-button size="small" type="primary" @click="getCustomers" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-row>
            <el-button size="small" icon="el-icon-plus" @click="addCustomer">添加</el-button>
            <el-button size="small" @click="transDialog"><i class="fa fa-share-alt"></i> 分配</el-button>
            <el-button size="small" @click="returnCustomerBox"><i class="fa fa-reply-all"></i> 扔回公海</el-button>
            <el-button size="small" @click="refresh"><i class="fa fa-refresh"></i> 刷新</el-button>
        </el-row>

        <el-row class="customer_row">
            <el-table :data="customerList" v-model="customerList" style="width: 100%;"
                      @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
                <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column prop="customerName" label="客户名称" align="center" min-width='200' className="asds">
                    <template scope="scope">
                        <div class="customer_col">
                            
                             <span @click="handleToDetail(scope.row)" :class="{ active: scope.row.visited == true }">
                                {{ scope.row.customerName}}
                            </span>
                            <!--<span style="word-break: normal">
				                <nuxt-link :to="{ path: '/customer/detailnew', query: { id: scope.row.id ,customerContactId: scope.row.customerContactId ,from: 'seas' ,customerName: scope.row.customerName}}" class="linked">
				                {{ scope.row.customerName}}
				                </nuxt-link>
				              </span>-->
                        </div>
                    </template>
                </el-table-column>

                <el-table-column :render-header="renderHeader" prop="customerTypeName" label="客户类别" align="center" min-width='117' className="asds"></el-table-column>
                <el-table-column prop="name" label="销售员" align="center" min-width='80' className="asds"></el-table-column>
                <el-table-column prop="contactName" label="联系人名称" align="center" min-width='110' className="asds"></el-table-column>
                <el-table-column prop="tel" label="手机号码" align="center" min-width='140' className="asds"></el-table-column>
                <el-table-column prop="customerFrom" label="客户来源"align="center" min-width='95' className="asds"></el-table-column>
                <el-table-column :render-header="renderHeader" prop="gmtCreate" align="center" min-width='173' className="asds"></el-table-column>
                
                <el-table-column :render-header="renderHeader" prop="lastFollowTime" align="center" min-width='173' className="asds"></el-table-column>
                <el-table-column :render-header="renderHeader" prop="planTime" align="center" min-width='173' className="asds"></el-table-column>

                <el-table-column prop="action" label="操作" align="center" fixed="right" width="100" className="asds">
                    <template scope="scope">
                        <div class="operator-btn">
                            <!--<el-button type="primary" icon="el-icon-edit" size="mini"
                                       @click="editCustomer(scope.row.id ,scope.row.customerContactId)"
                                       style="margin-right: 10px;">编辑
                            </el-button>-->
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBox(scope.row)">删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-row class="paging">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page="pagingData.pageNum"
                    :page-sizes="pagingData.pageSizes"
                    :page-size="filter.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagingData.total">
            </el-pagination>
        </el-row>

        <!--*****************分配框************-->
        <el-dialog title="分配" :visible.sync="dialogTableVisible" @close="closeDialog">
            <el-row style="margin-bottom: 20px" >
                <el-col :span="12">
                    <el-select v-model="userFilter.deptId" placeholder="请选择部门" size="small"  @change="selectDept">
                        <el-option v-for="item in deptList" :value="item.id" :label="item.name" :key="item.id"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-table class="seller-table" :data="userList" highlight-current-row  border style="max-height:541px" @current-change="highlightDialog" @row-click="selectUser">
                <el-table-column type="index" width="55" align="center"></el-table-column>
                <el-table-column property="account" label="用户名" width="" align="center"></el-table-column>
                <el-table-column property="name" label="用户姓名" width="" align="center"></el-table-column>
                <el-table-column property="departmentName" label="部门" align="center"></el-table-column>
            </el-table>
            <el-row class="paging">
                <el-pagination
                        @size-change="userHandleSizeChange"
                        @current-change="userHandleCurrentChange"
                        :current-page="pagingUserData.pageNum"
                        :page-sizes="pagingUserData.pageSizes"
                        :page-size="userFilter.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagingUserData.total">
                </el-pagination>
            </el-row>
            <el-row style="margin-top: 20px" >
              <el-col :span="12">
                <el-button type="primary" class="top_save" @click="transSubmit" size="small"><i class="fa fa-save"></i> 保存</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="danger" class="top_close" @click="dialogTableVisible = false"  size="small"><i class="fa fa-sign-out"></i> 关闭</el-button>
              </el-col>
            </el-row>
        </el-dialog>

        <!--*****************销售员框************-->
        <el-dialog title="选择销售员" :visible.sync="dialogVisible"  @close="closeOwnerDialog" >
            <el-row style="margin-bottom: 20px" >
                <el-col :span="12">
                    <el-select v-model="ownerFilter.deptId" placeholder="请选择部门" size="small" @change="selectSeller">
                        <el-option
                          v-for="(item,index) in ownerOptions"
                          :key="index"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-table 
                ref="ownerMultipleTable" 
                :data="ownerData" 
                border
                style="width: 100% max-height:541px"
                @selection-change="handleOwnerSelectionChange">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="account" label="用户名" width="" align="center"></el-table-column>
                <el-table-column prop="name" label="用户姓名" align="center"></el-table-column>
                <el-table-column prop="departmentName" label="部门" align="center"></el-table-column>
            </el-table>
            <el-row class="paging">
                <el-pagination
                    @current-change="ownerHandleCurrentChange"
                    @size-change="ownerHandleSizeChange"
                    :current-page="ownerPage.pageNum"
                    :page-sizes="ownerPage.pageSizes"
                    :page-size="ownerFilter.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="ownerPage.total">
                </el-pagination>
            </el-row>

            <el-row style="margin-top: 20px" >
              <el-col :span="12">
                <el-button type="primary" class="top_save" @click="onSubmit" size="small"><i class="fa fa-save"></i> 保存</el-button>
              </el-col>
              <el-col :span="12">
                <el-button type="danger" class="top_close" @click="dialogVisible = false"  size="small"><i class="fa fa-sign-out"></i> 关闭</el-button>
              </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {
            Row, Col, Form, FormItem, Tooltip, Input, Select, Option, DatePicker, ButtonGroup, Tree,
            Button, Table, TableColumn, Checkbox, CheckboxGroup, Message, MessageBox, Pagination, Dialog
    } from 'element-ui'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import {getDate , getArraySub , getLevelName, validTel, setToken, getCookie,uniqueArr} from '../../utils/auth'
    import Cookie from 'js-cookie'

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);

    Vue.use(DatePicker);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    Vue.use(Pagination);
    Vue.use(Tooltip);
    Vue.use(Dialog);
    Vue.use(Tree);

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;

    export default {
        head(){
            return {
                title: "新录资源"
            }
        },
        data () {
            return {
                tabName: '新录资源',
                seller:'',
                ownerOptions: [],
                ownerData: [],
                ownerSelection: [],
                dialogVisible: false,
                pickerOptions: {
                  disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                  }
                },
                pickerOptions1: {
		            disabledDate(time) {
		                return time.getTime() > Date.now()
		            }
		        },
                filter: {
                    CustomerName: '',   //客户名称
                    ContactName: '',   //联系人
                    Tel: '',    //手机号
                    CustomerFrom: '',    //客户来源
                    CustomerIndustry: '',  //所属行业
                    FollowCount: '',   //跟进次数
                    KpFlag: '',   //KP标识
                    importantFlag:'',
                    pageSize: 50, // 每页条数
                    pageNum: 1,
                    GmtCreateBegin: '', //创建时间开始
                    GmtCreateEnd: '',  //创建时间结束
                    PlanTimeBegin: '',   //下次联系时间开始
                    PlanTimeEnd: '',  //下次联系时间结束
                    LastFollowBegin: '', //最新跟进时间开始
                    LastFollowEnd: '',   //最新跟进时间结束
                    CustomerLevels: '',
                    newFlag: 1,
                    publicFlag: 0,
                    sortField: '',
                    sortOrder: '',
                    usIds: ''
                },
                GmtCreate: [],    //创建时间
                PlanTime: [],   //下次联系时间
                LastFollowTime: [],   //最新跟进时间
                checked: true,
                unchecked: false,
                multipleSelection: [],      // checkbox选中客户列表数据
                dialogTableVisible: false,
                deptList: [],               // 部门列表
                userList: [],               // 用户列表
                userFilter: {
                    pageNum: 1,
                    pageSize: 10,
                    deptId: ''
                },
                pagingUserData: {
                    pageSizes: [10, 20, 50],    // 每页可选条数列表,
                    total: 0,
                    pageNum: 1
                },
                pagingData: {
                    pageSizes: [10, 20, 50],    // 每页可选条数列表,
                    total: 0,
                    pageNum: 1
                },
                dialogCurrentRow: null,           // dialog高亮的行
                transSelectedUserId: null,        // dialog单击选择的用户id
                departmentRoleId: '',              // 当前登录用户的部门角色id
                category: {
                    name: '',
                    showTree: false,
                    data:[{
                        id: 0,
                        label: '全部',
                        children: [{    //预留children
                            id: 1,
                            label: '暂无数据'
                        }]
                    }]
                },
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                customerList:[],
                sortOrder: true,
                readOnly: false,
                ownerRows: [],
                ownerPage: {
                    pageSizes: [10, 20, 50],    // 每页可选条数列表,
                    total: 0,
                    pageNum: 1
                },
                ownerFilter: {
                    pageNum: 1,
                    pageSize: 10,
                    deptId: ''
                },
                backSeller: '',
                backId: '',
            }
        },
          computed : {
            ...mapGetters([
                
                "myCustomerXYNEW",
                
            ])
        },
        methods: {
            //搜索条件加入STORE
            setFilterCookie(){
                let data = JSON.stringify(this.filter);
                let category = JSON.stringify(this.category.name);
                this.$store.commit('NEW_RECORD_FILTER',{data});
                this.$store.commit('NEW_RECORD_CATEGORY',{data:category});
            },
            // 获取客户列表
            getCustomers () {
                if(this.filter.Tel && validTel(this.filter.Tel) == false) {
                    Message.warning({
                        message: '手机号码格式不正确'
                    });
                    return;
                }

                if (this.GmtCreate&&this.GmtCreate[0]) {
                    this.filter.GmtCreateBegin = this.GmtCreate[0]?getDate(this.GmtCreate[0],true):'';
                    this.filter.GmtCreateEnd =  this.GmtCreate[1]?getDate(this.GmtCreate[1],true):'';
                }

                if (this.PlanTime&&this.PlanTime[0]) {
                    this.filter.PlanTimeBegin = this.PlanTime[0]?getDate(this.PlanTime[0],true):'';
                    this.filter.PlanTimeEnd = this.PlanTime[1]?getDate(this.PlanTime[1],true):'';
                }

                if (this.LastFollowTime&&this.LastFollowTime[0]) {
                    this.filter.LastFollowBegin = this.LastFollowTime[0]?getDate(this.LastFollowTime[0],true):'';
                    this.filter.LastFollowEnd = this.LastFollowTime[1]?getDate(this.LastFollowTime[1],true):'';
                }

                this.setFilterCookie();

                this.$store.dispatch('customerList', this.filter)
                .then((response) => {
                    if(!response){return}
                    let result = response.data;
                    if (result.code == 0 && result.data) {
                        this.customerList = result.data.list;
                        for(var i = 0; i < this.customerList.length; i++) {
                            if(this.customerList[i].customerTypeName){
                                this.customerList[i].customerTypeName = this.customerList[i].customerTypeName.slice(0,2)
                            }
                            this.customerList[i].visited = false;
                        }
                        for(var j=0;j<this.visitedUrl.length;j++){
                                for(var i = 0; i < this.customerList.length; i++) {
                                    if(this.customerList[i].id == this.visitedUrl[j]){
                                        this.customerList[i].visited = true;
                                    }
                                }
                            }
                        this.pagingData.total = result.data.total;
                        this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
                    }else {
                        this.customerList = [];
                        this.pagingData.total = 0;
                        this.pagingData.pageNum = 1
                    }
                  })
            },
            // 客户列表多选
            handleSelectionChange(val) {
                let ids = [];
                for (let i = 0; i < val.length; i++) {
                    ids.push(val[i].id);
                }
                this.multipleSelection = ids;
            },
            //跳转到客户详情页
            handleToDetail(row) {
                let arr = this.visitedUrl;
                arr.push(row.id);
                arr = uniqueArr(arr);
                this.$store.commit('VISITEDURL',{visitedUrl:arr});
                this.$router.push({path: '/customer/detail?id=' + row.id + '&customerContactId=' + row.customerContactId + '&from=index&customerName=' + row.customerName})
            },
            // 获取用户列表
            getUserList () {
                let data = this.userFilter;
                this.$store.dispatch('getUserOwnerData', data)
                        .then((response) => {
                            if(!response){return}
                    let result = response.data;
                if (result.code === 0) {
                    this.userList = result.data.list;
                    this.pagingUserData.total = result.data.total;
                    this.pagingUserData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
                } else {
                    Message.error(result.message);
                }
            })
            },
            // dialog搜索用户
            deptUserSearch () {
                this.userFilter.pageNum = 1;
                this.getUserList();
            },
            empty () {
                this.filter = {
                    CustomerName: '',   //客户名称
                    ContactName: '',   //联系人
                    Tel: '',    //手机号
                    CustomerFrom: '',    //客户来源
                    CustomerIndustry: '',  //所属行业
                    FollowCount: '',   //跟进次数
                    KpFlag: '',   //KP标识
                    importantFlag: '',
                    pageSize: 50, // 每页条数
                    pageNum: 1,
                    GmtCreateBegin: '', //创建时间开始
                    GmtCreateEnd: '',  //创建时间结束
                    PlanTimeBegin: '',   //下次联系时间开始
                    PlanTimeEnd: '',  //下次联系时间结束
                    LastFollowBegin: '', //最新跟进时间开始
                    LastFollowEnd: '',   //最新跟进时间结束
                    CustomerLevels: '',
                    sortField: '',
                    sortOrder: '',
                    newFlag: 1,
                    publicFlag: 0
                };
                this.seller = '';
                this.GmtCreate = [];    //创建时间
                this.PlanTime = [];   //下次联系时间
                this.LastFollowTime = [];   //最新跟进时间
                this.category.name='';
                this.$refs.searchTree.setCheckedKeys([]);
                if(this.readOnly){
                    this.seller = this.backSeller;
                    this.filter.usIds = this.backId;
                }else {
                    this.seller = '';
                    this.filter.usIds = '' ;
                }

                this.setFilterCookie();
            },

            addCustomer () {
                this.$router.push({path: '/customer/add'});
            },
            editCustomer (id, customerContactId) {
                this.$router.push({path: '/customer/edit?id=' + id + '&customerContactId=' + customerContactId});
            },

            // 删除用户弹框
            deleteBox (row) {
                MessageBox.confirm('确认删除客户：' + row.customerName + '吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteCustomer(row.id);
                })
                .catch(() => {
                        Message.info({
                            message: '已取消删除'
                    });
                });
            },

            // 删除用户
            deleteCustomer (id) {
                this.$store.dispatch('deleteResult', {ids: id})
                .then((response) => {
                    if(!response){return}
                    var result = response.data;
                    if (result.successed && result.successed == true) {
                        this.getCustomers({pageNum: 1, pageSize: 10});
                        Message.success({
                            message: '删除成功'
                        });
                    }
                })
                .catch((error) => {
                    Message.error({
                        message: '删除失败'
                    })
                });
            },

            // 客户回归公海弹框
            returnCustomerBox () {
                if (this.multipleSelection == '') {
                    this.$message.error('请先选择客户');
                    return;
                }
                this.$confirm('确认将客户扔回公海吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.returnCustomer();
            })
            .catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消扔回'
                });
            });
            },
            // 客户回归公海
            returnCustomer () {
                if (this.multipleSelection == '') {
                    this.$message.error('请先选择客户');
                    return;
                }
                let ids = this.multipleSelection.join(',');

                this.$store.dispatch('returnCustomer', {ids: ids})
                        .then((response) => {
                            if(!response){return}
                    let result = response.data;
                if (result.code === 0) {
                    Message.success('扔回成功');
                    this.getCustomers();
                } else {
                    Message.error(result.message);
                }
            })
            },

            // 分配dialog
            transDialog () {
                if (this.multipleSelection == '') {
                    this.$message.error('请先选择客户');
                    return;
                }
                // 第一次弹窗赋值为true
                this.isFirstSearchUser = true;

                this.getUserList();
                this.dialogTableVisible = true;
                this.$store.dispatch('getOwnerDeptment')
                  .then((response) => {
                    if(!response){return}
                    var result = response.data;
                    if (result.code === 0) {
                        this.deptList = result.data;
                    }
                })
            },
            // 关闭dialog回调
            closeDialog () {
                this.dialogCurrentRow = null;         // 清除高亮的行
                this.transSelectedUserId = null;      // 清除选择的用户
                this.userFilter.deptId = '';    // 清除select的部门选择
                this.dialogTableVisible = false;
            },
            // dialog 用户列表单击选择高亮
            highlightDialog (val) {
                this.dialogCurrentRow = val;
            },
            // 选择分配到的用户
            selectUser (row, event, column) {
                this.transSelectedUserId = row.id;
            },
            // 保存分配
            transSubmit () {
                if (this.multipleSelection == '' || this.multipleSelection.length <= 0) {
                    this.$message.error('请先选择客户');
                    return;
                }
                if (this.transSelectedUserId == '' || this.transSelectedUserId == null) {
                    this.$message.error('请先选择用户');
                    return;
                }
                let ids = this.multipleSelection.join(',');
                this.$store.dispatch('transCustomer', {userid: this.transSelectedUserId, ids: ids})
                .then((response) => {
                    if(!response){return}
                    let result = response.data;
                    if (result.code === 0) {
                        Message.success('分配客户成功');
                        this.dialogTableVisible = false;  // 成功后关闭dialog
                        this.getCustomers();
                    } else {
                        Message.error(result.message);
                    }
                })
            },

            handleCurrentChange(val) {
                this.filter.pageNum = val;
                this.customerListCurrentPage = val;
                this.getCustomers(this.filter);
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                this.filter.pageNum = 1;
                this.getCustomers(this.filter);
            },
            // 弹框用户列表选择分页size
            userHandleSizeChange(val) {
                this.userFilter.pageNum = 1;
                this.userFilter.pageSize = val;
                this.getUserList();
            },
            // 弹框用户列表选择分页页码
            userHandleCurrentChange(val) {
                this.userFilter.pageNum = val;
                this.pagingUserData.pageNum = val;
                this.getUserList();
            },
            tableRowClassName(row, index) {
                if (row.kpFlag == '1') {
                    return 'info-row';
                }
                return '';
            },
            refresh() {
				window.location.reload();
			},
            //客户分类选中回调
            handleCheckChange(data,checked) {
                this.category.name ='';
                var checkedId = this.$refs.searchTree.getCheckedKeys(data,true);
                var checkedName = [];
                if(checkedId.length == this.category.data[0].children.length) {
                    this.category.name = '全部'
                }else {
                    for(var i=0;i<checkedId.length;i++){
                        checkedName.push(getLevelName(checkedId[i]));
                    }
                    this.category.name = checkedName.join(' / ');
                }
                this.filter.CustomerLevels = checkedId.join(',');
            },
            //隐藏客户分类
            treeBlurHide(){
                this.category.showTree = false;

                let data = document.getElementsByClassName('default')[0].scrollTop;
                this.$store.commit('MY_CUSTOMER_XY_NEW',{data});
            },
            renderHeader(h, { column, $index }){
                switch ($index) {
                    case 2:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('customer_level') }>客户类别&nbsp;<i class="fa fa-sort"></i></div>
                            );
                        break;
                    case 7:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('gmt_create') }>创建时间&nbsp;<i class="fa fa-sort"></i></div>
                            );
                    case 8:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('last_follow_time') }>最新跟进时间&nbsp;<i class="fa fa-sort"></i></div>
                            );

                        break;
                    case 9:
                        return (
                            <div style="color: #1488FF;cursor: pointer;" on-click={ () => this.sortData('plan_time') }>下次联系时间&nbsp;<i class="fa fa-sort"></i></div>
                            );
                        break;
                    
                }
            },
            sortData(type) {
                this.filter.sortField = type;
                this.filter.sortOrder = this.sortOrder == true ? 'asc':'desc';
                this.sortOrder = !this.sortOrder;
                this.getCustomers();
            },
            getUserData() {
                this.$store.dispatch('getUserPersonalData')
                  .then((response) => {
                    if(!response){return}
                    var result = response.data;
                    if (result.code === 0) {
                        if(result.data && result.data.leaderType == 0) {
                            this.seller = result.data.name;
                            this.backSeller = result.data.name;
                            this.backId= result.data.id;
                            this.filter.usIds = result.data.id;
                            this.readOnly = true;
                            this.getCustomers();
                        }else {
                            this.readOnly = false;
                            this.getCustomers();
                        }
                    }
                })
            },
            getOwnerData() {
                this.dialogVisible = true;
                this.getUserOwnerData();
                this.getOwnerDeptment();
            },

            //获取销售员列表
            getUserOwnerData() {
                this.$store.dispatch('getUserOwnerData',this.ownerFilter)
                  .then((response) => {
                    if(!response){return}
                    var result = response.data;
                    if (result.code === 0) {
                        this.ownerData = result.data.list;
                        this.ownerPage.total = result.data.total;
                        this.ownerPage.pageNum = result.data.pageNum;
                    }
                })
            },

            //获取销售员部门下拉框
            getOwnerDeptment() {
                this.$store.dispatch('getOwnerDeptment')
                  .then((response) => {
                    if(!response){return}
                    var result = response.data;
                    if (result.code === 0) {
                        this.ownerOptions = result.data;
                    }
                })
            },

            //销售员多选
            handleOwnerSelectionChange(selection) {
                let names = [];
                let ids = [];
                for (let i = 0; i < selection.length; i++) {
                    names.push(selection[i].name);
                    ids.push(selection[i].id)
                }
                this.ownerRows = ids;
                this.ownerSelection = names;
            },
            onSubmit() {
                this.seller = this.ownerSelection.join(',');
                this.filter.usIds = this.ownerRows.join(',');
                this.dialogVisible = false;
            },
        
            searchOwner() {
                this.getUserOwnerData();
            },
            // 弹框销售员列表选择分页size
            ownerHandleCurrentChange(val) {
                this.ownerFilter.pageNum = val;
                this.getUserOwnerData();
            },
            ownerHandleSizeChange(val) {
                this.ownerFilter.pageSize = val;
                this.ownerFilter.pageNum = 1;
                this.getUserOwnerData();
            },
            closeOwnerDialog() {
                this.ownerFilter.deptId = '';
                this.ownerFilter.pageNum = 1;
                this.ownerFilter.pageSize = 10;
                this.dialogVisible = false;
            },
            selectSeller(val) {
                this.getUserOwnerData();
            },
            selectDept(val) {
                this.userFilter.pageNum = 1;
                this.getUserList();
            }
        },
        computed: {
                ...mapGetters({
                    'customerDetailList': 'getCustomerDetailList',
                    'deleteResult': 'getDeleteResult',
                    'pageTabsList': 'getPageTabsList',
                    'visitedUrl': 'getVisitedUrl'
                })
        },
        created(){
            this.category.name ='';
            //从cookie里取出filter数据
            if (process.BROWSER_BUILD ) {
                    let filter = this.$store.getters.newRecordFilter;
                    if(filter) this.filter = JSON.parse(filter);

                    let category = this.$store.getters.newRecordCategory;
                    if(category) this.category.name = JSON.parse(category);

                    if(this.filter.GmtCreateBegin.length){
                        this.GmtCreate = [new Date(this.filter.GmtCreateBegin),new Date(this.filter.GmtCreateEnd)]
                    }

                    if(this.filter.PlanTimeBegin.length){
                        this.PlanTime = [new Date(this.filter.PlanTimeBegin),new Date(this.filter.PlanTimeEnd)]
                    }

                    if(this.filter.LastFollowEnd.length){
                        this.LastFollowTime = [new Date(this.filter.LastFollowBegin),new Date(this.filter.LastFollowEnd)]
                    }

                //pageTab
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
            
            

            var year = this.$route.query.year;
            var month = this.$route.query.month < 10 ? '0' + this.$route.query.month : this.$route.query.month;
            var date = this.$route.query.date < 10 ? '0' + this.$route.query.date : this.$route.query.date;
            if (year) {
                this.filter.PlanTimeBegin = year + '-' + month + '-' + date;
                this.filter.PlanTimeEnd = year + '-' + month + '-' + date;
                // if (process.BROWSER_BUILD) {
                //     var userData = window.localStorage.getItem('userData');
                //     if (userData) {
                //         this.filter.Name = JSON.parse(userData).name;
                //     }
                // }
            }
            this.getUserData();
            
            
        },
        mounted(){
            // 获取客户类别等级列表
            this.$store.dispatch('getSalesCategoryList')
            .then((response) => {
                if(!response){return}
                if(response.data && response.data.data ){
                    var data = response.data.data;
                    this.category.data[0].children=[];
                    for(var i=0;i< data.length;i++){
                        this.category.data[0].children.push({id: data[i].key , label : data[i].value});
                    }
                }
            })
            let scro = this.$store.getters.myCustomerXYNEW;

            var deNEW = document.getElementsByClassName("default")[0];
              setTimeout(function(){
                  deNEW.scrollTop = scro;
                  
              },900)
        }
    }

</script>

    

<style  lang="scss">
    .wrapper-new{
        margin-top:20px;
        /*// .linked:visited{
        //     color: #646464;
        // }*/
    	.el-table .asds>.cell{
    		padding: 0px;
    	}
        .operator-btn{
            .el-button + .el-button{
                margin-left:0;
            }
        }
        .el-form { 
	        .el-form-item {
	            width: 70%
	        } 
	        .el-input, .el-select, .el-cascader, .el-date-picker {
	            width: 100%
	        } 
        }
        .action_col {
            position: relative
        }

        .customer_row {
            margin-top: 20px;
            background-color: #ff0000;
        }

        .paging {
            margin-top: 15px;
        }

        .customer_col {
			cursor: pointer;
        span {
            display: block;
            color: #20a0ff;
            word-break: normal;

        a {
            text-decoration: none;
            color: #20a0ff;
        }

        img {
            margin-right: 5px;
            cursor: pointer
        }

        }
        span.active {
                color: #48576a;
            }
        }

        tbody {
            font-size: 12px;
        }

        .active {
            display: none;
        }

        .signRow {
            background-color: #00ee00;
        }

        .trans_button_col {
            text-align: center;
            margin-top: 15px
        }
        .top_close{
            float: left;
            margin-left: 20px;
            margin-top: 20px;
        }
        .top_close, .top_save{
            margin: 0 20px;
        }
        .top_save {
            float: right;
        } 
    }


</style>